import 'dart:ui';
import 'package:acgn_pioneer/pages/sendsms/sendsms_mixin.dart';
import 'package:circular_check_box/circular_check_box.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import '../public.dart';
import 'package:acgn_pioneer/components/country_list_pick.dart';

/// 我的页面
class RegisterPage extends StatefulWidget {
  RegisterPage({Key key}) : super(key: key);

  @override
  _RegisterPageState createState() {
    return _RegisterPageState();
  }
}

class _RegisterPageState extends State<RegisterPage>
    with SendSMSMixin<RegisterPage> {
  @override
  void initState() {
    super.initState();
  }

  bool isAgree = false;
  bool visible = false;
  ThemeProvider theme;
  Size size;

  @override
  Widget build(BuildContext context) {
    theme = Provider.of<ThemeProvider>(context);
    size = MediaQuery.of(context).size;
    return Scaffold(
        backgroundColor: theme.primaryColor,
        appBar: AppBar(
          // title: Text('用户注册'),
          leadingWidth: 44,
          leading: BackComponent(),
        ),
        body: SingleChildScrollView(
            child: Column(children: [
          Container(
            height: 160,
            padding: EdgeInsets.only(top: 32),
            alignment: Alignment.center,
            // color: Colors.yellow,
            margin: EdgeInsets.only(bottom: 8),
            child: Image.asset(AppConfig.ASSETS_PATH + 'qmlogo_64.png'),
          ),
          Padding(
              padding: EdgeInsets.only(left: 16, right: 16),
              child: Column(children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      margin: EdgeInsets.only(right: 4),
                      child: Image.asset(AppConfig.ASSETS_PATH + 'hbzs_16.png'),
                    ),
                    Text('登录送积分红包，享提现特权',
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.white,
                        )),
                    Container(
                      height: 16,
                      margin: EdgeInsets.only(left: 4),
                      padding: EdgeInsets.only(left: 4, right: 4),
                      decoration: BoxDecoration(
                          color: ColorUtil.rgba(254, 45, 102, 1),
                          borderRadius: BorderRadius.all(Radius.circular(4))),
                      child: Text(
                        '萌新福利',
                        style: TextStyle(
                            fontSize: 12,
                            height: 1.3,
                            color: ColorUtil.rgba(255, 255, 255)),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 16,
                ),
                Container(
                    width: double.infinity,
                    height: 48,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(24)),
                      color: ColorUtil.rgba(255, 255, 255, 0.05),
                    ),
                    child: Row(children: [
                      CountryListPick(
                        appBar: AppBar(
                          title: Text('选择国家与地区'),
                          centerTitle: true,
                          leadingWidth: 44,
                          leading: BackComponent(),
                        ),
                        pickerBuilder: (context, CountryCode countryCode) {
                          return Container(
                              padding: EdgeInsets.only(left: 24),
                              child: Row(
                                children: [
                                  Text(
                                    countryCode.dialCode,
                                    style: TextStyle(color: Colors.white),
                                  ),
                                  Icon(Icons.arrow_drop_down,
                                      color: ColorUtil.rgba(182, 182, 182, 1)),
                                ],
                              ));
                        },
                        theme: CountryTheme(
                          isShowFlag: false,
                          isShowTitle: false,
                          isShowCode: true,
                          isDownIcon: true,
                          searchHintText: '输入搜索关键字',
                          searchText: '搜索',
                          lastPickText: '已选择',
                          showEnglishName: false,
                        ),
                        initialSelection: '+86',
                        onChanged: (CountryCode countryCode) {
                          dialCode = countryCode.dialCode;
                        },
                      ),
                      // Container(
                      //     // margin: EdgeInsets.only(right: 4),
                      //     // color: Colors.yellow,
                      //     padding: EdgeInsets.only(left: 12),
                      //     child: DropdownButtonHideUnderline(
                      //       child: DropdownButton(
                      //         value: dialCode,
                      //         onChanged: (e) {
                      //           print('onChanged$e');
                      //           this.setState(() {
                      //             this.dialCode = e;
                      //           });
                      //         },
                      //         items: [
                      //           DropdownMenuItem(
                      //               value: '086', child: Text('+ 086')),
                      //           DropdownMenuItem(
                      //               value: '089', child: Text('+ 089'))
                      //         ],
                      //         isDense: true,
                      //         dropdownColor: theme.primaryColor,
                      //         focusColor: theme.primaryColor,
                      //         iconEnabledColor:
                      //             ColorUtil.rgba(182, 182, 182, 1),
                      //         style: TextStyle(color: Colors.white),
                      //       ),
                      //     )),
                      Expanded(
                          child: TextField(
                              style: TextStyle(color: Colors.white),
                              onChanged: (String text) {
                                phone = text;
                                LogUtil.e(text, tag: 'TextField');
                              },
                              decoration: InputDecoration(
                                  hintText: '手机号码',
                                  hintStyle: TextStyle(
                                      fontSize: 16,
                                      color:
                                          ColorUtil.rgba(255, 255, 255, 0.3)),
                                  contentPadding: EdgeInsets.only(right: 24))))
                    ])),
                SizedBox(
                  height: 16,
                ),
                Text('未注册的手机，验证并设置密码后即完成注册',
                    style: TextStyle(
                        fontSize: 12,
                        color: ColorUtil.rgba(255, 255, 255, 0.6))),
                SizedBox(
                  height: 16,
                ),
                FlatButton(
                    onPressed: _onPressed,
                    height: 48,
                    minWidth: double.infinity,
                    textColor: ColorUtil.rgba(51, 51, 51, 1),
                    shape: RoundedRectangleBorder(
                        side: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(24))),
                    color: ColorUtil.rgba(255, 215, 59, 1),
                    child: Text(
                      '获取验证码',
                      style: TextStyle(fontSize: 18),
                    )),
                SizedBox(
                  height: 48,
                ),
                Padding(
                  padding: EdgeInsets.only(left: 40, right: 40),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                          margin: EdgeInsets.only(right: 4),
                          width: 22,
                          height: 22,
                          child: Stack(clipBehavior: Clip.none, children: [
                            Visibility(
                                visible: visible,
                                child: Positioned(
                                  left: -45,
                                  top: -38,
                                  child: Container(
                                      child: Column(
                                    children: [
                                      Container(
                                        height: 32,
                                        padding:
                                            EdgeInsets.only(left: 8, right: 8),
                                        decoration: BoxDecoration(
                                            color:
                                                ColorUtil.rgba(254, 45, 102, 1),
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(8))),
                                        child: Text(
                                          '请勾选同意后注册',
                                          style: TextStyle(
                                              fontSize: 12,
                                              height: 2.2,
                                              color: ColorUtil.rgba(
                                                  255, 255, 255)),
                                        ),
                                      ),
                                      // 三角形
                                      RotatedBox(
                                          quarterTurns: 90,
                                          child: ClipPath(
                                              child: Container(
                                                height: 5,
                                                width: 9,
                                                color: ColorUtil.rgba(
                                                    254, 45, 102, 1),
                                              ),
                                              clipper: TrianglePath())),
                                    ],
                                  )),
                                )),
                            Positioned(
                                top: -2,
                                child: SizedBox(
                                    width: 22,
                                    height: 22,
                                    child: FittedBox(
                                        child: CircularCheckBox(
                                            value: this.isAgree,
                                            inactiveColor:
                                                ColorUtil.rgba(77, 77, 108),
                                            activeColor:
                                                ColorUtil.rgba(254, 45, 102),
                                            materialTapTargetSize:
                                                MaterialTapTargetSize
                                                    .shrinkWrap,
                                            visualDensity: VisualDensity(
                                                horizontal: -2, vertical: -2),
                                            onChanged: (bool val) {
                                              print('object$val');
                                              this.setState(() {
                                                this.isAgree = val;
                                              });
                                            }))))
                          ])),
                      Expanded(
                          child: RichText(
                              maxLines: 10,
                              text: TextSpan(
                                  style: TextStyle(
                                      fontSize: 12,
                                      height: 1.5,
                                      color: ColorUtil.rgba(255, 255, 255, 1)),
                                  children: [
                                    TextSpan(
                                      recognizer: _agree(),
                                      text: '已阅读并同意',
                                    ),
                                    TextSpan(
                                        text: '《用户协议》',
                                        style: TextStyle(
                                            color: ColorUtil.rgba(
                                                100, 145, 217, 1)),
                                        recognizer: _recognizer(() {
                                          Routers.navigateTo(RouterPage.WEB,
                                              params: {
                                                'url': ACGN.config.userAgreement
                                              });
                                        })),
                                    TextSpan(
                                        text: '《隐私政策》',
                                        style: TextStyle(
                                            color: ColorUtil.rgba(
                                                100, 145, 217, 1)),
                                        recognizer: _recognizer(() {
                                          Routers.navigateTo(RouterPage.WEB,
                                              params: {
                                                'url': ACGN.config.ysxy
                                              });
                                        }))
                                  ])))
                    ],
                  ),
                ),
                SizedBox(
                  height: 32,
                ),
                // Row(
                //   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                //   children: [
                //     SVG.icon(
                //       'apple',
                //       size: 44,
                //       color: Colors.yellow,
                //     ),
                //     SVG.icon(
                //       'share_qq',
                //       size: 44,
                //       color: Colors.yellow,
                //     ),
                //     SVG.icon(
                //       'share_wx',
                //       size: 44,
                //       color: Colors.yellow,
                //     ),
                //     SVG.icon(
                //       'weibo',
                //       size: 44,
                //       color: Colors.yellow,
                //     )
                //   ],
                // )
              ]))
        ])));
  }

  TapGestureRecognizer _recognizer(Function fn) {
    return TapGestureRecognizer()
      ..onTap = () {
        fn();
      };
  }

  _onPressed() {
    LogUtil.e(phone, tag: 'phone');
    RegExp exp = RegExp(
        r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$');
    bool matched = exp.hasMatch(phone);
    if (!matched) {
      return EasyLoading.showToast('请输入正确的手机号码');
    }
    if (!isAgree) {
      setState(() {
        visible = true;
      });
      Future.delayed(Duration(seconds: 2), () {
        setState(() {
          visible = false;
        });
      });
      return;
    }
    sendsms();
  }

  _agree() {
    return _recognizer(() {
      print('已阅读并同意');
      this.setState(() {
        this.isAgree = !this.isAgree;
      });
    });
  }

  void dispose() {
    super.dispose();
  }
}
